<template>
  <div class="dashboard">

    <!-- 流程图 -->
    <div>
      <el-steps
        direction="vertical"
        :active="1"
      >
        <el-step @click.native="onClick(1)">
          <template
            @click="asd"
            slot="description"
          >
            <div>
              奥术大师多
              <!-- <img
                src="@images/noData.png"
                alt="123"
              > -->
            </div>
          </template>
          <!-- <template slot="icon">
            <img
              style="width:24px;height:24px;"
              src="@images/noData.png"
              alt="123"
            >
          </template> -->
        </el-step>
        <el-step
          title="步骤 2"
          @click.native="onClick(21)"
        ></el-step>
        <el-step
          title="步骤 3"
          description="这是一段很长很长很长的描述性文字"
          @click.native="onClick(31)"
        ></el-step>
      </el-steps>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

import { Message } from 'element-ui';
import SmallTitlePanel from '@/components/SmallTitlePanel/SmallTitlePanel.vue';

const components = {
  SmallTitlePanel,
};

@Component({
  components,
})
export default class Dashboard extends Vue {
  message: string = 'this is dashboard page';

  asd() {
    console.log('1 :', 1);
  }

  onClick(a: number) {
    console.log('2 :', 2);
  }

  data2: any = {
    message: 'success',
    status: 200,
    data: {
      xmlList: [{ id: '95e3f8be-fe7e-11e8-b599-4f2873d1ceaa', name: '用友李雅倩\u003c制单\u003e' }, { id: '96dfbde0-fe7e-11e8-b599-4f2873d1ceaa', name: '萨弗迪\u003c审核\u003e' }, { id: '99c132f4-fe7e-11e8-b599-4f2873d1ceaa', name: '用友裴彦各\u003c审核\u003e' }],
      msgVOList: [{
        dealMan: '杜明', duration: '0天1时17分21秒', approveResult: '批准', checkStatus: '角色', checkNote: '', approveStatus: '无效（作废）', checkMan: '萨弗迪', dealDate: '2018-12-13 16:31:06', billtypeName: '供应商申请单', approveLink: '萨弗迪\u003c审核\u003e',
      }, {
        dealMan: '用友耿少慧', duration: '0天18时14分30秒', approveResult: '批准', checkStatus: '角色', checkNote: '', approveStatus: '无效（作废）', checkMan: '萨弗迪', dealDate: '2018-12-14 09:28:15', billtypeName: '供应商申请单', approveLink: '萨弗迪\u003c审核\u003e',
      }, {
        dealMan: '用友董宝元', duration: '', approveResult: '', checkStatus: '角色', checkNote: '', approveStatus: '运行中', checkMan: '萨弗迪', dealDate: '', billtypeName: '供应商申请单', approveLink: '萨弗迪\u003c审核\u003e',
      }, {
        dealMan: '用友耿少慧', duration: '', approveResult: '', checkStatus: '角色', checkNote: '', approveStatus: '运行中', checkMan: '萨弗迪', dealDate: '', billtypeName: '供应商申请单', approveLink: '萨弗迪\u003c审核\u003e',
      }, {
        dealMan: '杜明', duration: '0天0时3分54秒', approveResult: '不批准', checkStatus: '角色', checkNote: '123123', approveStatus: '无效（作废）', checkMan: '萨弗迪', dealDate: '2018-12-20 10:15:50', billtypeName: '供应商申请单', approveLink: '萨弗迪\u003c审核\u003e',
      }, {
        dealMan: '杜明', duration: '', approveResult: '', checkStatus: '角色', checkNote: '', approveStatus: '运行中', checkMan: '萨弗迪', dealDate: '', billtypeName: '供应商申请单', approveLink: '萨弗迪\u003c审核\u003e',
      }],
    },
  };

  mounted() {
    console.log('this.data2 :', this.data2.data.msgVOList);
    const msgVOList = this.data2.data.msgVOList;
  }
}
</script>


<style lang="scss" scoped>
.dashboard {
  .auditingHistory {
    .item {
      margin-bottom: 0.1rem;
      border-bottom: 1px solid #ddd;
      .dealMan {
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
